<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 取消全部元素的默认内外边距，按box计算 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 测试用区域显式样式 */
        .area {
            padding: 10px;
            border: 2px solid #f08c00;
            background-color: #ffec99;
            border-radius: 5px;
        }
        /* grid容器下所有直接子元素
        因为使用HTML语义标签而非div因此使用*
        即nav header article等 */
        .container {
            display: grid;
            grid-gap: 15px; /* 声明栅格间距 */
            /* 声明栅格系统3列，及占用比重 */
            grid-template-columns: 1fr 3fr 1fr;
            /* 各元素在栅格中的位置 */
            grid-template-areas:
                    "header header header"
                    "nav article aside"
                    "footer footer footer";
        }
        header {grid-area: header;}
        nav {grid-area: nav;}
        nav ul {list-style-type: none;}
        article {grid-area: article;}
        aside {grid-area: aside;}
        .side {grid-area: side;}
        .ad {grid-area: ad;}
        footer {grid-area: footer;}


        /* 基于max-width时，尺寸顺序必须先声明大尺寸，后声明小尺寸 */
        /* 平板小屏电脑分辨率。当宽度小于900px时 */
        @media (max-width: 900px) {
            .container {
                grid-template-columns: 1fr 3fr;
                grid-template-areas:
                        "header header"
                        "nav article"
                        "side ad"
                        "footer footer";
            }
            /* 将aside中的元素移到上一层 */
            aside {
                display: contents;
            }
        }
        /* 当宽度小于600px时 */
        @media (max-width: 600px) {
            .container {
                grid-template-columns: auto;
                grid-template-areas:
                        "header"
                        "nav"
                        "article"
                        "side"
                        "ad"
                        "footer";
            }
            nav ul {
                display: flex;
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
<p>breakpoint: 600, 900;</p>
<div class="container">
    <header class="area">The header</header>
    <nav class="area">
        <ul>
            <li><a href="">nav 1</a></li>
            <li><a href="">nav 2</a></li>
            <li><a href="">nav 3</a></li>
        </ul>
    </nav>
    <article class="area"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores beatae ipsum itaque
        labore soluta tenetur veritatis vitae voluptates. A error esse laborum maiores modi nesciunt nisi, nulla quis
        quisquam, reprehenderit, similique sunt?</p>
    </article>
    <aside>
        <div class="side area">Sidebar</div>
        <div class="ad area">Advertising</div>
    </aside>
    <footer class="area">The footer</footer>
</div>
</body>
</html>